import React, { useEffect, useState } from 'react';
import { Form, DatePicker, Select, Button, Table, Switch, Space, Modal, Input } from 'antd';
import { request } from 'umi'

const Order = (props) => {

    const { Option } = Select;

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '台桌',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '金额',
            dataIndex: 'total',
            key: 'total',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button type="primary" onClick={() => { handleEdit(text._id) }}>
                        编辑
                    </Button>
                </Space>
            ),
        },
    ];

    const EditForm = ({ visible, onCreate, onCancel }) => {
        // const [form] = Form.useForm();
        const handleDelete = (index)=>{
            const param = new URLSearchParams
            param.append("oid",propOid)
            param.append("index",index)
            request("http://www.young1024.com:1717/v1/order/deldisk",{data:param}).then(
                (res)=>{
                    // console.log(res.data.list);
                    let arr = res.data.list.map(item => item)
                    setPropArr(arr)
                },
                (err)=>{
                    console.log(err);
                },
            )
        }

        const subdataSource = propArr.map((item, index) => {
            item["totalPrice"] = item.num * item.price;
            item["key"] = index;
            return item;
        })
        const subcolumns = [
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '数量',
                dataIndex: 'num',
                key: 'num',
            },
            {
                title: '单价',
                dataIndex: 'price',
                key: 'price',
            },
            {
                title: '总价',
                dataIndex: 'totalPrice',
                key: 'totalPrice',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Space size="middle">
                        <Button type="primary" danger onClick={() => { handleDelete(text.key) }}>
                            删除
                        </Button>
                    </Space>
                ),
            }
        ];
        
        return (
            <Modal
                visible={visible}
                title="编辑"
                okText="确定"
                cancelText="取消"
                onCancel={onCancel}
                onOk={onCancel}
            >
                {/* <Form
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    // layout="vertical"
                    name="form_in_modal"
                    initialValues={{
                        modifier: 'public',
                        // index: propObj.index,
                        // name: propObj.name
                    }}
                >
                    {
                        propArr.map((item, index) => {
                            return (
                                <Form.Item name={index} label={item.name} key={index} initialValue={item.num}>
                                    <Input readOnly />
                                </Form.Item>
                            )
                        })
                    }
                </Form> */}
                <Table dataSource={subdataSource} columns={subcolumns} />;

            </Modal>
        );
    };

    const onCreate_edit = (values) => {
        console.log('Received values of form: ', values);
        // const param = new URLSearchParams;
        // param.append("id", propObj.id)
        // param.append("index", values.index)
        // param.append("name", values.name)
        // request("http://www.young1024.com:1717/v1/table/update", { data: param }).then(
        //     (res) => {
        //         console.log(res);
        //         if (res.status === "success") {
        //             getData();
        //             message.info('添加成功');
        //             setVisible_edit(false);
        //         }
        //     },
        //     (err) => { console.log(err); }
        // )
    };
    const [visible_edit, setVisible_edit] = useState(false);
    const [propArr, setPropArr] = useState([]);
    const [propOid, setPropOid] = useState("");
    const handleEdit = (id) => {
        setPropOid(id)
        const param = new URLSearchParams;
        param.append("oid", id)
        request("http://www.young1024.com:1717/v1/order/detail", { data: param }).then(
            (res) => {
                // console.log(res);
                let arr = res.data.list.map(item => item)

                // console.log(arr);
                setPropArr(arr)
                setVisible_edit(true)
            },
            (err) => { console.log(err); }
        )
    }



    const [list, setList] = useState([])
    const [tableList, setTableList] = useState([])
    const getOrder = (param) => {
        request("http://www.young1024.com:1717/v1/order/order").then(
            (res) => {
                // console.log("1",res);
                let newArray = res.data.map((item, index) => {
                    item["key"] = index + 1;
                    param.find((ele) => {
                        if (ele._id === item.table) {
                            item["name"] = ele.name
                        }
                    })
                    return item
                })
                console.log(newArray);
                setList(newArray)
            },
            (err) => { console.log("失败", err); }
        )
    }
    const getTable = () => {
        request("http://www.young1024.com:1717/v1/table/list").then(
            (res) => {
                // console.log("2",res);
                setTableList(res.data)
                getOrder(res.data)
            },
            (err) => { console.log("失败", err); }
        )
    }
    useEffect(() => {

        getTable()
    }, [])
    return (
        <div style={{ padding: "20px", height: "100%" }}>
            <div style={{ padding: "20px", background: "white", minHeight: "800px" }}>
                <h2>订单管理</h2>
                <div>
                    <Form style={{ display: "flex" }}>
                        <Form.Item name="date-picker" label="日期">
                            <DatePicker />
                        </Form.Item>
                        <Form.Item
                            name="tableIndex"
                            label="台桌"
                            style={{ marginLeft: "20px" }}
                        >
                            <Select
                                placeholder="请选择"
                                allowClear
                            >
                                {tableList.map((item, index) => {
                                    return (
                                        <Option key={index} value={item._id}>{item.name}</Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" style={{ marginLeft: "20px" }}>
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div>
                    <div>
                        <Table columns={columns} dataSource={list} rowKey={record => record._id} />
                        <EditForm
                            visible={visible_edit}
                            onCreate={onCreate_edit}
                            onCancel={() => {
                                setVisible_edit(false);
                            }}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Order;
